<template>
  <view class="container">
    <view class="content">
      <view class="icon-container">
        <image
          src="@/static/img/cardTitle.png"
          mode="widthFix"
          class="icon-image"
        />
        <view class="title">证件有效期到期提醒</view>
      </view>

      <view class="info-item">
        <text class="label">经营许可证号：</text>
        <text class="value">{{ licenseNumber }}</text>
      </view>
      <view class="info-item">
        <text class="label">证件初领日期：</text>
        <text class="value">{{ issueDate }}</text>
      </view>
      <view class="info-item">
        <text class="label">证件有效期起：</text>
        <text class="value">{{ validFrom }}</text>
      </view>
      <view class="info-item">
        <text class="label">证件有效期止：</text>
        <text class="value">{{ validTo }}</text>
      </view>
      <view class="info-item">
        <text class="label">您的证件还有：</text>
        <text class="value">{{ validTo }}天将会过期</text>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      licenseNumber: "宜昌420591000045",
      issueDate: "2015-04-22",
      validFrom: "2023-08-01",
      validTo: "2027-07-31",
      daysRemaining: 1143,
    };
  },
  // 如果需要从服务器获取数据，可以在这里添加方法
  methods: {
    // fetchCertificateInfo() {
    //   // 从服务器获取证件信息的逻辑
    // }
  },
  // 页面加载时获取数据
  // onLoad() {
  //   this.fetchCertificateInfo()
  // }
};
</script>

<style lang="scss" scoped>
.container {
  background-color: #f3f4f6;
  min-height: 100vh;
  padding: 20rpx;
  width: 100%;
}

.content {
  background-color: #ffffff;
  border-radius: 10rpx;
  padding: 30rpx;
}

.icon-container {
  display: flex;
  justify-content: flex-start;

  border-bottom: 2rpx solid #f1f1f1;
  .title {
    font-size: 36rpx;

    text-align: center;
    margin-bottom: 40rpx;
    height: 48rpx;
    line-height: 48rpx;
    margin-left: 20rpx;
  }
  .icon-image {
    width: 40rpx;
    height: 40rpx;
    display: flex;
    align-items: center;
    justify-content: center;
  }
}

.info-item {
  margin: 40rpx 0;

  .label {
    color: #0d1444;

    font-size: 28rpx;
  }

  .value {
    color: #0d1444;
    font-size: 28rpx;
  }
}
</style>
